<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表格展示示例</title>
  <link href="https://fonts.googleapis.com/css?family=Rock+Salt" rel="stylesheet" type="text/css" />
</head>
<body>
  <style>
  html {
    font-family: "helvetica neue", helvetica, arial, sans-serif;
  }
  table {
    table-layout: fixed; /* 根据列标题的宽度来规定列的宽度，然后适当地处理它们的内容。 */
    width: 100%;
    border: 3px solid purple;
    border-collapse: collapse;     /* 将表格边框合为一条。 */
  }
  caption {
    padding: 20px;
    caption-side: right;
    text-align: right;
    letter-spacing: 1px;
    font-family: "Rock Salt", cursive;
    font-style: italic;
    color: #666;
  }

  thead, tfoot {
    color: white;
    text-shadow: 1px 1px 1px black;
    border: 3px solid purple;
  }

  /* 使用了thead th:nth-child(n) 选择了四个不同的标题 (:nth-child) 选择器（选择第 n 个子元素) 设置。 */
  thead th {
    background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(54, 118, 214, 0.5));
    font-family: "Rock Salt", cursive;
    border: 3px solid purple;
  }
  thead th:nth-child(1) {
    width: 30%;
  }
  thead th:nth-child(2) {
    width: 20%;
  }
  thead th:nth-child(3) {
    width: 15%;
  }
  thead th:nth-child(4) {
    width: 35%;
  }

  /* 使用伪类选择器用于选择特定的子元素，odd 选择奇数、even 选择偶数(值得学习) */
  tbody tr:nth-child(odd) {
    background: linear-gradient(60deg, rgba(150, 193, 243, 0.1), rgba(73, 141, 230, 0.5));
  }
  tbody tr:nth-child(even) {
    background-color: #ffffff;
  }

  /* 为行、列数据占据空间，使表看起来更加清晰。 */
  tbody th {
    letter-spacing: 1px;
    padding: 10px;
    text-align: center;    /* 表格单元头部居中以及字体设置 */
    font-family: "Rock Salt", cursive;
    border: 3px solid purple;
  }
  tbody td {
    letter-spacing: 1px;
    padding: 10px;
    text-align: center;
    border: 3px solid purple;
  }

  /* 表格单元脚部居右中以及字体设置 */
  tfoot th, tfoot td  {
    text-align: right;
    font-family: "Rock Salt", cursive;
    background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0, 0, 0, 0.5));
    border: 3px solid purple;
  }

  /* 表格中的图像 */
  .user-img {
    margin-right: 2px;
    vertical-align: middle;
    border: sandybrown solid 3px;
    border-radius: 5px;
  }
  </style>
  <table>
    <caption>查询展示个人信息数据</caption>
    <thead>
      <tr>
        <th scope="col">ID</th>
        <th scope="col">Name</th>
        <th scope="col">Age</th>
        <th scope="col">Sex</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row" rowspan="2">1</th> <td><img class="user-img" src="./favicon.ico">weiyigeek</td> <td>25</td> <td>Man</td>
      </tr>
      <tr>
       <td>赵小水</td> <td>26</td> <td>Woman</td>
      </tr>
      <tr>
        <th scope="row">3</th> <td>CSS</td> <td>17</td><td>unkown</td>
      </tr>
      <tr>
        <th scope="row">4</th> <td>唯一极客</td> <td>23</td><td>unkown</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th scope="row" colspan="2">Total</th> <td colspan="2">3</td>
      </tr>
    </tfoot>
  </table>
</body>
</html>